<template>
  <view class="content">
    <view class="back"></view>
    <view>
      <view
          v-for="item in bodyData"
          @click="selectLanguageCode(item)"
          class="box"
      >
        <view
            style="color: #000000;font-weight: bold"
        >{{ item.name }}
        </view>
        <view style="color: #666666;">{{ item.code }}</view>

        <image
            v-if="languageCodeSelected == item.code"
            class="box-select-icon"
          :src="$kt.file.byPath('image/yes.svg')"></image>

<!--        <text-->
<!--            v-if="languageCodeSelected == item.code">√-->
<!--        </text>-->
      </view>
    </view>
    <view style="height: 100rpx"></view>

    <!--  确定按钮  -->
<!--    <view class="btn" @click="confirm">-->
<!--      确定-->
<!--    </view>-->
  </view>
</template>

<script>
import i18n from "@/uni_modules/uniapp-kantboot/libs/i18n";

export default {
  data() {
    return {
      i18n,
      bodyData: [{
        "baiduTranslateCode": "ara",
        "code": "ar",
        "description": "阿拉伯语",
        "name": "العربية"
      }],
      languageCodeSelected: ""
    };
  },
  created() {
    this.languageCodeSelected = this.$kt.i18n.getLanguageCode();
    console.log("languageCodeSelected", this.languageCodeSelected);
    // 切换标题
    uni.setNavigationBarTitle({
      title: this.$i18n.enToGlobal("Language switch")
    });
    this.getBodyData();
  },
  methods: {
    selectLanguageCode(item) {
      if(this.languageCodeSelected===item.code){
        return;
      }

      this.languageCodeSelected = item.code;
      this.$kt.i18n.setLanguageCode(item.code);
      // 删除DataChange:clientInit的本地存储
      this.$kt.storage.remove("DataChange:clientInit");
      setTimeout(()=>{
        // 重新进入页面
        this.$kt.router.reLaunch('/pages/into/into');
      },500)
    },
    getBodyData() {
      this.$kt.request.send({
        uri: '/system-dict-web/language/getBySupport',
        method: 'POST',
        stateSuccess: (res) => {
          this.bodyData = res.data;
        }
      });
    },
    confirm() {
      this.$kt.request.request({
        url: "/system-dict-web/dictI18n/getDictI18nMapSelf",
        method: "POST",
        data:{
          "dictGroupCode": "appFront"
        },
        stateSuccess: (res) => {
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  padding: 30rpx;
  box-sizing: border-box;
}

.box {
  position: relative;
  padding: 30rpx;
  font-size: 30rpx;
  border: 1rpx solid #f0f0f0;
  border-radius: 10rpx;
  //background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: 20rpx;
  //border-bottom: 1rpx solid rgba(118,118,118,.3);
  .box-select-icon{
    position: absolute;
    right: 0;
    top: 0;
    width: 60rpx;
    height: 60rpx;
    border-radius: 0 10rpx 0 0;
  }
}

.box:active {
  opacity: .8;
}

.btn{
  position: fixed;
  z-index:100;
  bottom: 0;
  width: 100%;
  padding: 30rpx;
  left: 0;
  text-align: center;
  color: #f0f0f0;
  letter-spacing: 5rpx;
  box-sizing: border-box;
  background-color: #15161c;
  //box-shadow: 0 -5rpx 30rpx rgba(0,0,0,1);
}

.btn:active{
  background-color: #15161c;
  color: #F8F8F8;
}

</style>
